import React, { Component, Fragment } from "react";
// antd
import { Button, Tag } from "antd"
import Action from "@c/buttonAction/Index";
// table 组件
import TableComponent from "@c/tableData/Index";
import DepartmentModal from "./components/DepartmentModal";

class DepartmentList extends Component {
    constructor(props){
        super(props);
        this.state = {
            // 表头
            tableConfig: {
                url: "departmentListAll",
                method: "get",
                checkbox: true,
                thead: [
                    { 
                        title: "名称", 
                        dataIndex: "name",
                        key: "name",
                    },
                    { 
                        title: "简称", 
                        dataIndex: "code", 
                        key: "code",
                    },
                    { 
                        title: "关联账号", 
                        key: "account_list",
                        render: (text, rowData) => {
                            return (
                                <div>
                                    { rowData.account_list ?
                                      rowData.account_list.map(tag => (
                                        <Tag key={tag}>{tag}</Tag>
                                      )) : ''
                                    }
                                </div>
                            )
                        }
                    },
                    { 
                        title: "管理员", 
                        dataIndex: "admin_list", 
                        key: "admin_list",
                        render: (rowData => {
                            console.log(rowData)
                            return (
                                <div>
                                    { rowData ?
                                      rowData.map(tag => (
                                        <Tag key={tag}>{tag}</Tag>
                                      )) : ''
                                    }
                                </div>
                            )
                        })
                    },
                    { 
                        title: "操作", 
                        dataIndex: "operation", 
                        key: "operation", 
                        render: (text, rowData) => {
                            return (
                                <div className="inline-button">
                                    <Action>
                                        <Action.Button onClick={() => this.departmentModal({status: true, department_id: rowData.id})}>编辑</Action.Button>
                                        <Action.Button onClick={() => this.delete(rowData.id)}>删除</Action.Button>
                                    </Action>
                                </div>
                            )
                        }
                    }
                ],
                formItem: [
                    { 
                        type: "Input",
                        label: "账号信息", 
                        name: "name", 
                        placeholder: "请输入账号信息"
                    }
                ]
            },
            // 表的数据
            data: []
        };
    }
    /** 生命周期挂载完成 */
    componentDidMount(){}

    // 获取子组件实例
    getChildRef = (ref) => {
        this.tableComponent = ref; // 存储子组件
    }

    // 获取弹窗子组件实例
    getDepartmentModalRef = (ref) => { this.child = ref }
    // 显示弹窗
    departmentModal = (data) => {
        console.log(data)
        this.child.visibleModal(data);
    }

    /** 删除 */
    delete = (id) => {
        this.tableComponent.onHandlerDelete(id)
    }

    render(){
        return (
            <Fragment>
                <TableComponent onRef={this.getChildRef} batchButton={true} config={this.state.tableConfig} >
                    <Button type="primary" ref="departmentAdd" onClick={() => this.departmentModal({ status: true })}>添加部门</Button>
                </TableComponent>
                <DepartmentModal onRef={this.getDepartmentModalRef} />
            </Fragment>
        )
    }
}
export default DepartmentList;